<?php
include_once '../../Model/M_Producto.php';
$productos = new M_Producto();
$idsubrubro = $_REQUEST['codigo'];
$lista = $productos->searchProductosxSubRubro($idsubrubro);

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<head>
    <style>
        .tableBody{
            background: #ffffff;
            background: -moz-linear-gradient(-45deg,  #ffffff 0%, #f3f3f3 50%, #ededed 88%, #ffffff 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(88%,#ededed), color-stop(100%,#ffffff));
            background: -webkit-linear-gradient(-45deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
            background: -o-linear-gradient(-45deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
            background: -ms-linear-gradient(-45deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
            background: linear-gradient(135deg,  #ffffff 0%,#f3f3f3 50%,#ededed 88%,#ffffff 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
            font-size: 14px;
            text-align: center;
        }
        .prod_img{
            width: 120px;
            height: 80px;
            float: left;
        }
        .prod_des{
            width: 170px;
            height: 80px;
            float: left;
            text-align: left;
            padding-left: 3px;
        }
        .prod_des label{
            font-size: 12px            
        } 
        .prod_des spam{
            font-size: 10px;
        }
        #producto{
            width: 355px;
            height: 90px;            
            float: left;
                
                background: rgb(226,226,226); /* Old browsers */
                background: -moz-linear-gradient(top,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
                background: linear-gradient(to bottom,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
                margin: 2px;
                padding: 3px;
                margin-top: 7px;
                text-align: center;
                font-size: 8px;
                font-weight: bold;
        }
            .producto{
                float: left;
                padding: 10px;
                margin: 4px;
                border: 4px solid #A8A8A8;
                border-collapse: collapse;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                background: #f3e2c7;
                background: -moz-linear-gradient(-45deg,  #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));
                background: -webkit-linear-gradient(-45deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                background: -o-linear-gradient(-45deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                background: -ms-linear-gradient(-45deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                background: linear-gradient(135deg,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );
                width: calc(100% / 2 - 45px);
                height: 80px;
            }
            .producto:hover{
                float: left;
                padding: 10px;
                margin: 4px;
                border: 4px solid #A8A8A8;
                border-collapse: collapse;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                background: #f2825b;
                background: -moz-linear-gradient(-45deg,  #f2825b 0%, #e55b2b 50%, #f07146 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f2825b), color-stop(50%,#e55b2b), color-stop(100%,#f07146));
                background: -webkit-linear-gradient(-45deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                background: -o-linear-gradient(-45deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                background: -ms-linear-gradient(-45deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                background: linear-gradient(135deg,  #f2825b 0%,#e55b2b 50%,#f07146 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=1 );
            }
            .subRubroImagen{
                margin-right: 8px;
                float: left;
                text-align: center;
                border: 4px solid #A8A8A8;
                height: 70px;
            }
            .subRubroDescripcion{
                
                float: left;
                text-align: justify;
                font-size: 12px;
                text-shadow: 3px 3px 3px #aaa;
                text-decoration: none;
                color: black;
                width: calc(100% - 108px - 50px);
            }
            .subRubroNombre{
                
                text-align: justify;
            }
            .subRubroStock{
                
                text-align: justify;
            }
            .subRubroPrecio{
                
                text-align: justify;
            }
            
</style>
</head>
<body>
    <div>PRODUCTOS</div>
    <? for($i=0; $i<count($lista); $i++){ ?>
    <a href="javascript:FAjax('../Pedido/V_Producto.php', 'pedido_der_top', 'codigo=<?=$lista[$i]['id_sub_rubro']?>', 'POST');">
        <div class="producto" id="<?= $lista[$i]['id_producto'] ?>" onclick="agregaDetalle(id,'<?= $lista[$i]['nombre']?>','<?= $lista[$i]['precio_fijo']?>','agrega')">
            <div class="subRubroImagen">
                <img height="70" width="100" src="../images/Producto/<?=$lista[$i]['imagen'];?>"/>
            </div>
            <div class="subRubroDescripcion">
                <div class="subRubroNombre">
                    <?= $lista[$i]['nombre']; ?>
                </div>
                <div class="subRubroDescripcionBreve"><?= $lista[$i]['descripcion']; ?></div>
                <div class="subRubroStock">15</div>
                <div class="subRubroPrecio">S/ <?= $lista[$i]['precio_fijo']; ?></div>
            </div>
        </div>
    </a>
    <?}?>
</body>